<template>
  <div class="tab-bar">
    <div class="tab-item" @click="switchTab('home')" :class="{ active: currentTab === 'home' }">
      <div ref="homeAnimation" class="lottie-container"></div>
      <span>首页</span>
    </div>
    <div class="tab-item" @click="switchTab('message')" :class="{ active: currentTab === 'message' }">
      <div ref="messageAnimation" class="lottie-container"></div>
      <span>消息</span>
    </div>
    <div class="tab-item" @click="switchTab('xingqiu')" :class="{ active: currentTab === 'xingqiu' }">
      <div ref="xingqiuAnimation" class="lottie-container"></div>
      <span>星球</span>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance } from 'vue'
import homeJson from '../assets/home.json'
import messageJson from '../assets/message.json' 
import xingqiuJson from '../assets/xingqiu.json'
import theme from '../assets/theme.json'

export default {
  name: 'TabBar',
  setup() {
    const { proxy } = getCurrentInstance()
    return {
      lottie: proxy.$lottie
    }
  },
  data() {
    return {
      currentTab: 'home',
      animations: {
        home: null,
        message: null,
        xingqiu: null
      },
      themeColor: theme.primaryColor
    }
  },
  mounted() {
    // 根据当前路由设置初始选中状态
    const path = this.$route.path
    if (path.includes('message')) {
      this.currentTab = 'message'
    } else if (path.includes('planet')) {
      this.currentTab = 'xingqiu'
    } else {
      this.currentTab = 'home'
    }

    // 初始化动画
    this.animations.home = this.lottie.loadAnimation({
      container: this.$refs.homeAnimation,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: homeJson
    })

    this.animations.message = this.lottie.loadAnimation({
      container: this.$refs.messageAnimation,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: messageJson
    })

    this.animations.xingqiu = this.lottie.loadAnimation({
      container: this.$refs.xingqiuAnimation,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      animationData: xingqiuJson
    })

    // 初始化所有图标到第一帧
    Object.keys(this.animations).forEach(key => {
      // 设置到最后一帧以显示完整图标
      this.animations[key].goToAndStop(this.animations[key].totalFrames - 1, true)
    })

    // 播放当前选中的标签动画
    this.playAnimation(this.currentTab)
  },
  methods: {
    switchTab(tab) {
      if (this.currentTab === tab) return
      this.currentTab = tab
      this.playAnimation(tab)
      
      // 修改路由导航逻辑
      const routes = {
        home: '/home',
        message: '/message',
        xingqiu: '/planet'
      }
      
      this.$router.push({
        path: routes[tab]
      }).catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error(err)
        }
      })
    },
    playAnimation(tab) {
      // 重置所有动画到最后一帧（显示完整图标）
      Object.keys(this.animations).forEach(key => {
        this.animations[key].goToAndStop(this.animations[key].totalFrames - 1, true)
      })
      // 从头播放当前选中的动画
      this.animations[tab].goToAndStop(0, true)
      this.animations[tab].play()
    }
  },
  beforeDestroy() {
    // 销毁所有动画实例
    Object.keys(this.animations).forEach(key => {
      if (this.animations[key]) {
        this.animations[key].destroy()
      }
    })
  }
}
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.tab-item.active {
  opacity: 1;
}

.lottie-container {
  width: 30px;
  height: 30px;
}

span {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}

.active span {
  color: v-bind(themeColor);
}

.active :deep(svg path) {
  fill: v-bind(themeColor) !important;
}

.active :deep(svg g) {
  fill: v-bind(themeColor) !important;
  stroke: v-bind(themeColor) !important;
}
</style> 